<template>
	<view class="add page c00">
		<view class="bgf7 p12">
			<view class="bgff px14 pb10">
				
				<view class="flex flexC borb py12" @click="$refs.menuPop.open()">
					<text class="flex1">优惠券类型</text>
					<text class="py3" v-if="type == 'user'">新人券</text>
					<text class="py3" v-else-if="type == 'order'">订单券</text>
					<text class="py3" v-else-if="type == 'normal'">普通券</text>
					
					<text class="arrowR ml3"></text>
					
				</view>
				<view class="flex flexC borb py12">
					<text class="flex1">所属店铺</text>
					<text class="py3">{{selectShop.name}}</text>
				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">券名字</text>
					<input type="text" v-model="name" placeholder="券名字" class="py3 aliR" />
				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">使用时间段</text>
					<view class="flex flexC fs12 mt12">
						<picker mode="time" @change="dateStartChange">
							<text class="c99 w100 px12 py7 bor r40 mr10">{{startTime}}</text>
						</picker>
						<picker mode="time" @change="dateEndChange">
							<text class="c99 w100 px12 py7 bor r40 mr10">{{endTime}}</text>
						</picker>

					</view>
				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">有效天数</text>
					<input type="number" v-model="valid_day" placeholder="发放之日开始计算时间" class="py3 aliR" />
				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">抵扣金额</text>
					<input type="digit" v-model="price" placeholder="优惠券抵扣金额" class="py3 aliR" />
				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">订单金额</text>
					<input type="digit" v-model="order_price" placeholder="订单满多少多少金额抵扣" class="py3 aliR" />
				</view>
				
				<view class="flex flexC borb py12" v-if="type == 'order'">
					<text class="flex1">同一个用户最多领取</text>
					<input type="digit" v-model="max_count" placeholder="同一个用户最多领取" class="py3 aliR" />
				</view>
				
				<view class="flex flexS borb pb12 pt18">
					<text class="mr14 pt3">包厢范围</text>
					<view class="flex flexC flexW flex1">
						<text  v-for="(item,index) in list" :key="index" @click="clickRoom(item)"
							class="mb6 r40 px12 py4 mr6" :class="item.check==true?'bged':'bgf6'">{{item.name}}</text>
					</view>
				</view>

				<view class="flex flexS borb pb12 pt18">
					<text class="mr14 pt3">日期范围</text>
					<view class="flex flexC flexW flex1">
						<text v-for="(item,index) in weekList" :key="index" @click="clickWeek(item)"
							class="mb6 r40 px12 py4 mr6" :class="item.check == true?'bged':'bgf6'">周{{item.name}}</text>
					</view>
				</view>


				<view class="flex flexS  pb12 pt18">
					<text class="mr14 pt3">注意事项</text>
					<view class="flex flexC flexW flex1">

						<input v-for="item in notice" type="text" v-model="item.name" class=" bor r40 px12 py6 mt5"
							placeholder="事项" />
					</view>
					<text@click="addNotice" class="bged mb6 r40 px15 py4">添加</text>

				</view>



			</view>
			<view class="flex flexC flexJC py20">
				<view class="aliC py12 w-17 bg41 r40" @click="save">保存</view>
			</view>

		</view>
		
		
		<uni-popup ref="menuPop" type="bottom">
			<view class="popup-content2">
		
				<button class="popup-btn button" @click="clickCoupon('user')">新人券</button>
				<button class="popup-btn button" @click="clickCoupon('order')">订单券</button>
				<button class="popup-btn button" @click="clickCoupon('normal')">普通券</button>
		
			</view>
		
		</uni-popup>
	</view>
</template>

<script>

	export default {
		components: {
		},
		data() {
			return {
				room_id: '',
				detail: null,
				tagShow: false,
				name:'',
				hour:"",
				order_price:"",
				price:"",
				max_count:'',
				num:"",
				valid_day:"",
				startTime: '00:00',
				endTime: "23:59",
				selectShop: null,
				list:[],
				weekList:[{
					check:true,
					name:"一"
				},{
					check:true,
					name:"二"
				},{
					check:true,
					name:"三"
				},{
					check:true,
					name:"四"
				},{
					check:true,
					name:"五"
				},{
					check:true,
					name:"六"
				},{
					check:true,
					name:"日"
				}],
				notice: [
				],
				type:'user'
			};
		},
		onLoad(option) {

			var select = option.selectShop;
			if (select != "") {
				this.selectShop = JSON.parse(select);
			}
		
			this.$refs.menuPop.open();
			this.getDetail();
		},

		onShow() {
			
		},
		methods: {
			
			clickCoupon(type){
				this.type = type;
				this.$refs.menuPop.close();
			},
			
			clickRoom(item){
				item.check = !item.check;
			},

			clickWeek(item){
				item.check= !item.check;
			},

			addNotice(){
				var obj =new Object();
				obj.name = "";
				this.notice.push(obj);
			},

			dateStartChange(e) {
				this.startTime = e.detail.value;
			},

			dateEndChange(e) {
				this.endTime = e.detail.value;

			},

		

			save() {
				
				if(this.name == ''){
					uni.showToast({
						title:"请填写券标题"
					})
					return;
				}
				
				if(this.startTime == '开始时间' || this.endTime == '开始时间' ){
					uni.showToast({
						title:"请选择时间"
					})
					return;
				}
				
				
				
				if(this.valid_day == ''){
					uni.showToast({
						title:"请填写有效天数"
					})
					return;
				}
				
				if(this.price == ''){
					uni.showToast({
						title:"请填写抵扣金额"
					})
					return;
				}
				
				if(this.order_price == ''){
					uni.showToast({
						title:"请填写订单满多少金额"
					})
					return;
				}
				if(this.type == 'order'){
					
					if(this.max_count == ''){
						uni.showToast({
							title:"请填写最大领取的份数"
						})
						return;
					}
				}
				
				
				var room = new Array();
				for(var i=0;i<this.list.length;i++){
					
					if(this.list[i].check == true){
						room.push(this.list[i]);
					}
				}
				if(room.length == 0){
					uni.showToast({
						title:"请点击选择包厢"
					})
					return;
				}
				
				var week = new Array();
				for(var i=0;i<this.weekList.length;i++){
					if(this.weekList[i].check == true){
						week.push(this.weekList[i]);
					}
				}
				
				if(week.length == 0){
					uni.showToast({
						title:"请点击选择日期"
					})
					return;
				}
				
				var noticeList = new Array();
				for(var i=0;i<this.notice.length;i++){
					if(this.notice[i].name != ""){
						noticeList.push(this.notice[i]);
					}
				}
				
				let param = {
					
					type:this.type,
					shop_id:this.selectShop.id,
					name:this.name,
					startTime:this.startTime,
					endTime:this.endTime,
					max_count:this.max_count,
					valid_day:this.valid_day,
					price:this.price,
					order_price:this.order_price,
					room:JSON.stringify(room),
					week:JSON.stringify(week),
					notice:JSON.stringify(noticeList)
				}
				
				
				this.$api.addCoupon(param).then(res => {

					if (res.code == 1) {
						uni.showModal({
							title:"添加提示",
							content:"添加成功",
							showCancel:false,
							complete() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},

			

			

			getDetail() {
				let param = {
					shop_id: this.selectShop.id
				};
				let that = this;
				this.$api.getRoomList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		.w48 {
			width: 96rpx;
			height: 96rpx;
		}

		.imgbox {
			width: 164rpx;
			height: 164rpx;
			background-color: #E8E8E8;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
				background: rgba(181, 180, 180, .8);
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
	
	.popup-content2 {
		background: #FFFFFF;
	
		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}
	
		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}
	
		button::after {
			border: none;
		}
	
		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>
